<!--@author vidy3587@gmail.com-->
<template>

  <div class="short-video-page">
    <Navigator>上传作品</Navigator>
    <div class="upload-video-title">
      <div class="upload-video-title-text">
        欢迎，尚夏sunshine
      </div>
    </div>
    <div  class="form">
      <div class="form-item">
        <label class="form-label" for="name">作品名称</label>
        <input min="10" v-model="workName" placeholder="请输入您作品的名称" type="text" id="name">
      </div>
      <div class="form-item">
        <label class="form-label" for="description">作品描述</label>
        <textarea min="200" v-model="workDesc" placeholder="请输入作品的描述" id="description">
        </textarea>
      </div>
      <div class="form-item" >
        <label class="form-label">上传作品</label>
        <uploader :options="options" class="video-uploader">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :attrs="attrs">
              <img src="~@/assets/plus.png" alt="" class="plus-btn">
            </uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </div>
      <div class="upload-btn">
        <van-button loading-text="上传中...." :loading="isUpLoading" class="btn pink-btn" @click="upload()">
          上传作品
        </van-button>
      </div>
      <div class="description">*每位玩家只能提交一次</div>
    </div>
  </div>
</template>

<script>
import {uploadVideo} from "@/api/shortVideo";
import {Toast} from "vant";
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
import Navigator from "@/pages/components/navigator";

export default {
  name: "upload",
  components: {Navigator},
  data() {
    return {
      isUpLoading: false,
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: '//localhost:3000/upload',
        testChunks: false
      },
      // userId: "1",
      // nickName: "ddd",
      workDesc: "",
      workName: "",
      workVideoUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/05/11/videoplayback.mp4",
      attrs: {
        accept: 'video/*'
      }
    }
  },
  methods: {
    async upload() {
      if (this.workDesc.length > 200) {
        Toast.fail("作品描述不能超过200字!");
        return;
      }
      if (this.workDesc.length === 0) {
        Toast.fail("请填写作品描述!");
        return;
      }
      if (this.workName.length > 10) {
        Toast.fail("作品名称不能超过10字!");
        return;
      }
      if (this.workName.length === 0) {
        Toast.fail("作品名称不能为空!");
        return;
      }
      this.isUpLoading = true;
      console.log("this.$route", this.$route);
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      try {
        const response = await uploadVideo({
          nickName: userInfo.name,
          userId: userInfo.id,
          workName: this.workName,
          workDesc: this.workDesc,
          workVideoUrl: this.workVideoUrl
        });
        console.log("response", response);
        if (response.status === 0) {
          this.$router.replace({
            name: 'short_video_review', query: {
              id: userInfo.id,
              name: userInfo.name,
            }
          })
        }
      } finally {
        this.isUpLoading = false;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.upload-video-title {
  font-size: px2rem(36px);
  color: $short_video_title_color;
  letter-spacing: 0;
  text-align: center;
  @include withBg("~@/assets/upload_video_title.png", px2rem(513px), px2rem(105px), center, center);
  width: px2rem(513px);
  height: px2rem(105px);
  line-height: px2rem(105px);
  margin: 0 auto;
}

.upload-video-title-text {
  transform: translateY(px2rem(10px));
}

.form {
  width: px2rem(610px);
  margin: px2rem(42px) auto 0 auto;
}

.form-item {
  .form-label {
    font-size: px2rem(32px);
    line-height: px2rem(120px);
    color: $lightFontColor;
    margin-left: px2rem(29px);
  }

  input, textarea {
    background: #FFFFFF;
    border-radius: px2rem(20px);
    outline: none;
    border: none;
    padding-left: px2rem(55px);
    box-sizing: border-box;
    display: block;
    width: px2rem(610px);
    font-size: px2rem(28px);
  }

  input {
    height: px2rem(80px);
  }

  textarea {
    line-height: px2rem(80px);
    min-height: px2rem(160px);
  }
}

.video-uploader {
  //background: red;
  .uploader-drop {
    background: transparent;
    box-sizing: border-box;
    width: px2rem(610px);
    height: px2rem(392px);
    border-radius: px2rem(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;

    .uploader-btn {
      width: px2rem(610px);
      height: px2rem(392px);
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.plus-btn {
  width: px2rem(70px);
  height: px2rem(70px);
}

.upload-btn {
  margin-top: px2rem(50px);

  .pink-btn {
    width: 100%;
    padding: 0;
  }
}

.description {
  margin-top: px2rem(19.8px);
  font-size: px2rem(30px);
  color: $lightFontColor;

}
</style>